<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>相对定位对象不可层叠</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	font-size: 9pt;
	line-height: 12pt;
	margin-top: 150px;
	margin-left: 150px;
}

.box1 {
	background-color: #33CCFF;
	height: 200px;
	width: 210px;
	padding: 5px;
}

.box2 {
	background-color: #66CC66;
	height: 100px;
	width: 100px;
	position: relative;
	float: left;
	left: 100px;
}

.box3 {
	background-color: #CC99FF;
	height: 100px;
	width: 100px;
	position: relative;
	float: left;
	right: 100px;
}
-->
</style>
</head>

<body>
	<div class="box1">
	
		<div class="box2">我家在左边</div>
<!-- 		<div class="box3">我家在右边</div> -->

		相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局， 如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。

	</div>
</body>
</html>







